import React, { FC, useEffect, useState } from "react"
import { RouteComponentProps } from "react-router-dom"
import useAsyncRetryFunc from "../../utils/react-use/useAsyncRetryFunc"
import { getGroupMemberList } from "../../api"
import './avatar.scss'


type AvatarSizeEnum = "default" | "large" | "small" | "mini"

interface AvatarProps  {
    size?: AvatarSizeEnum,
    url?: string,
    extralClass?: string,
    nickName?: string,
    userID?: string,
    groupID?: string,
}

const Avatare:FC<AvatarProps> = ( { size='default',url:avatar,extralClass = '',nickName:nick,userID:uid,groupID:gid } ): JSX.Element => {
    const [nickName,setNickName] = useState(nick)
    const [url,setUrl] = useState(avatar)
    const [userID,setUserID] = useState(uid)
    const [groupID,setGroupID] = useState(gid)
    const displayInfo = (info:string)=>{
        if(!info){
            return "unknown"
        }
        return info.slice(0, 2).toUpperCase()
    }
    const { value, loading, retry } = useAsyncRetryFunc(async () => {
        if(groupID?.length>0){
            return await getGroupMemberList({
                groupId:groupID,
                nextSeq: 0,
            })
         }
         return null
    }, [groupID]);
    const getGrounCSS = ()=>{
        let urls=""
        const userList: any[] = value?.group_get_memeber_info_list_result_info_array || [];
        if(groupID?.length>0&&userList.length>0){
            const nums = Math.min(userList.length,9);
            const cols = Math.min(userList.length,3);
            const startHeight:number = Math.ceil(nums/cols)>1? 1:50;
            let eleurl:string;
            urls= userList.slice(0, nums).reduce((pre,cur,index)=>{
                eleurl =cur.group_member_info_face_url||""
                if(eleurl?.length<=0){
                    eleurl ="";
                }
                return pre+`no-repeat url(${eleurl}) ${12*(index%cols)}px ${startHeight+50*Math.floor(index/cols)}%/11px,`
            },"");
            urls=urls.slice(0,urls.length-1);
        }
        return urls+" #437fbc"
    }
    const urlComp:JSX.Element =  <div className={`avatar ${size} ${extralClass}`} style={{
        backgroundImage:`url(${url})`,
    }}>
    </div>;
    const nickComp:JSX.Element = <div className={`avatar ${size} ${extralClass}`} >
        {
            displayInfo(nickName)
        }
    </div>;
    const userIDComp:JSX.Element = <div className={`avatar ${size} ${extralClass}`} >
        {
            displayInfo(userID)
        }
    </div>;
    const groupIDComp:JSX.Element = <div className={`avatar ${size} ${extralClass}`} style={{ background:getGrounCSS()}}>
    </div>;
    const defaltComp:JSX.Element = <div className={`avatar ${size} ${extralClass}`}>
        未知
    </div>;
    useEffect(()=>{
        setNickName(nick)
        setUrl(avatar)
        setUserID(uid)
        setGroupID(gid)
    },[avatar,nick,uid,gid])
    return (
        <>
        {
            url ? urlComp :groupID? groupIDComp: nickName ? nickComp : userID ? userIDComp : defaltComp
        }
        </>
    )
}
export const Avatar= React.memo(Avatare);